<template>
	<view>
		<view class="status_bar"></view>
		<view class="top">
			<image class="bgimg" :src="baseURL+imgUrl" mode=""></image>
			<view class="title">
				<view  class="left">
					<image class="left" @click="back" src="../../static/cut/left.png" mode=""></image>
				</view>
				<image class="right" @click="shareBoxshow = true" src="../../static/qiandao/shera.png" mode=""></image>
			</view>
			<!-- <view class="yulu">
				<view class="yuluBig">
					安全要讲，事故要防，
				</view>
				<view class="yuluBig">
					安不忘危，乐不忘忧。
				</view>
				<view class="from">
					——   安全语录
				</view>
			</view> -->
			<view class="dateTime">
				<view class="data"><text>{{time.day}}</text>日</view>
				<view class="dataym">{{time.year}}年{{time.mon}}月</view>
			</view>
		</view>
		<view class="content">
			<view class="card">
				<view class="jifen">
					<text>我的积分：{{point}}分</text>
					<view class="jifenshop" @click="goIntegralMall">积分商城</view>
				</view>
				<view class="lianx">你已连续签到</view>
				<view class="lianxTian">
					<text>{{signNum}}</text>天
				</view>
				<view class="LXtip">连续签到7天可得7分</view>
				<view class="daybox">
					<view v-for="(item,index) in date_list" :key='index'>
						<view :class="item.is_sign==1?'hasbg':'hasbg2'">第{{index+1}}天</view>
						<view>{{item.dateTime}}</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="cadtitle">预警</view>
				<view class="xxList" style="height: calc(100% - 34upx);overflow-y: auto;">
					<!-- <view class="list">姚明随手拍发现一条安全隐患 <text class="time">2小时前</text></view> -->
					<view @click="toWarnDetail(item)" class="list" v-for="(item, index) in warnList" :key="index">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view :class="shareBoxshow?'shareBoxshow shareBox':'shareBoxhide shareBox'">
			<view class="mark"  @click="shareBoxshow = false"></view>
			 <canvas class="shareimg" canvas-id="firstCanvas"></canvas>
			<view class="shareBox_bottom">
				<view @click="save('WXSceneSession','weixin')">
					<image src="../../static/qiandao/WXshare.png" mode=""></image>
					微信
				</view>
				<view @click="save('WXSenceTimeline','weixin')">
					<image src="../../static/qiandao/PYshare.png" mode=""></image>
					朋友圈
				</view>
				<view @click="save('WXSceneSession','qq')">
					<image src="../../static/qiandao/QQshare.png" mode=""></image>
					QQ
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				shareBoxshow:false,
				UserDetail:{},
				date_list:[],
				imgUrl:'',//图片地址
				signNum:'',//连续签到次数
				point:'',//积分
				time:{year:'',mon:'',day:'',time:''},//签到日期
				baseURL:this.$API.baseURL,
				warnList: []
			}
		},
		onReady: function (e) {
			
		},
		onLoad() {
			this.getUserDetail();
			this.getWarnList();
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.hide();}
			}, 100);
			// #endif
		},
		methods:{
			// 获取预警信息
			getWarnList(){
				var _this = this;
				uni.request({
					url:_this.$API.getFxWarning,
					method:"POST",
					header: _this.$API.get_head(),
					success: (res) => {
						_this.warnList = res.data.data.list.rows;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			// 预警详情
			toWarnDetail(item){
				uni.navigateTo({
					url: `../organization/finishTheTask?sspid=${item.ssp_id}`
				})
			},
			shareAction(imgurl,type,provider){
				uni.share({
				    provider: provider,
				    scene: type,
				    type: 2,
				    imageUrl: imgurl,
				    success: function (res) {
				        uni.showModal({
				        	content: '分享成功',
				        	showCancel: false
				        });
				    },
				    fail: function (err) {
						console.log(JSON.stringify(err))
				        uni.showModal({
				        	content: '分享失败',
				        	showCancel: false
				        });
				    }
				});
			},
			//Canvas保存图片
			save: function(provider,type) {
				var _this = this;
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: uni.upx2px(514),
				  height:uni.upx2px(818),
				  canvasId:'firstCanvas',
				  success: function(res) {
					_this.shareAction(res.tempFilePath,type,provider)
				  } 
				})
			},
			canvasdraw(){
				var context = uni.createCanvasContext('firstCanvas')
				//填充底部白色
				context.rect(0,0,uni.upx2px(514), uni.upx2px(818))
				context.setFillStyle('#FFFFFF')
				context.fill()
				context.stroke()
				// 顶部添加图片
				context.drawImage(this.baseURL+this.imgUrl,0,0,uni.upx2px(514),uni.upx2px(349))
				// context.setFontSize(14)
				// context.fillText('安全要讲，事故要防',uni.upx2px(51),uni.upx2px(101))
				// context.fillText('安不忘危，乐不忘忧。',uni.upx2px(51),uni.upx2px(156))
				context.fillText(this.time.day,uni.upx2px	(426),uni.upx2px(238))
				context.setFontSize(10)
				context.fillText('日',uni.upx2px(461),uni.upx2px(235))
				context.fillText(this.time.year+'年'+this.time.mon+'月',uni.upx2px(368),uni.upx2px(276))
				
				context.setFillStyle('#000000')
				context.setFontSize(18)
				context.fillText('我是'+this.UserDetail.NAME,uni.upx2px(15),uni.upx2px(418))
				context.setFontSize(12)
				context.setFillStyle('#403d35')
				context.fillText('已使用安全环保app'+this.time.myInDate+'天',uni.upx2px(15),uni.upx2px(477))
				context.fillText('识别二维码 关注公众号',uni.upx2px(41),uni.upx2px(578))
				
				context.drawImage(this.baseURL+this.UserDetail.avatar,uni.upx2px(109),uni.upx2px(649),uni.upx2px(84),uni.upx2px(90))
				context.drawImage(this.baseURL+'/upload/image/gzh.jpg',uni.upx2px(325),uni.upx2px(561),uni.upx2px(160),uni.upx2px(160))
				
				// context.stroke()
				context.draw()
			},
			//签到
			signIn(){
				var _this = this;
				uni.request({
					url:this.$API.signIn,
					method:"GET",
					data:{
						userid:uni.getStorageSync("userid")
					},
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data.message == 'success'){
							uni.showModal({
								content:res.data.data.message,
								showCancel: false,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
							_this.signNum = res.data.data.signNum;
							_this.date_list = res.data.data.date_list;
							_this.date_list.forEach(function(item,index){
									_this.date_list[index].dateTime = item.date.substr(5,2)+'.'+item.date.substr(8,2)
							})
							_this.imgUrl = res.data.data.imgUrl;
							_this.point = res.data.data.point;
							_this.time['year'] = res.data.data.time.substr(0,4);
							_this.time['mon'] = res.data.data.time.substr(5,2);
							_this.time['day'] = res.data.data.time.substr(8,2);
							_this.time['time'] = res.data.data.time;
							_this.time['myInDate'] = res.data.data.myInDate;
							
							_this.canvasdraw()
						}else{
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						}
					},
					fail: (e) => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//获取用户信息
			getUserDetail(){
				var _this=this;
				uni.request({
					url:this.$API.getUserDetail,
					method:"POST",
					data:{
						userid:uni.getStorageSync("userid"),
					},
					header:this.$API.get_head(),
					success: (res) => {
						_this.UserDetail=res.data.data;
						_this.signIn()
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			back(){
				uni.navigateBack({
					delta:1 
				});
			},
			goIntegralMall(){
				uni.navigateTo({
					url:'/pages/IntegralMall/integraList'
				})
			},
			canvasIdErrorCallback: function (e) {
			    console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style lang="scss">
	.shareBox_bottom{
		height:236upx;
		position:fixed;
		width:100%;
		background:#FFFFFF;
		z-index:9922;
		display:flex;
		justify-content: space-around ;
		bottom: 0;
		align-items: center;
	}
	.shareBox_bottom view{
		text-align: center;
	}
	.shareBox_bottom view image{
		width:98upx;
		height:95upx;
		margin: 0 auto;
		display:block;
	}
	
	
	.shareBox{
		position:fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}
	.shareBoxshow{
		z-index: 9920;
	}
	.shareBoxhide{
		z-index: -1;
	}
	
	.mark{
		position:fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background:rgba(0,0,0,.6);
		z-index:9921;
	}
	.shareimg{
		position:fixed;
		width:514upx;
		height: 818upx;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		z-index:9922;
	}
	
	.content{
		background:#FFFFFF;
		padding: 30upx 0;
		box-sizing: border-box;
		height: calc(100vh - var(--status-bar-height) - 510upx);
	}
	.card{
		box-shadow: 0 0 10upx 4upx #CCCCCC;
		border-radius:10upx;
		padding:10upx;
		margin: 0 40upx 30upx;
	}
	.card:first-child{
		height: 480rpx;
	}
	.card:last-child{
		margin-bottom: 0;
		height: calc(100% - 540rpx);
		overflow-y: auto;
	}
	.jifen{
		display:flex;
		font-size:24upx;
		margin-bottom:18upx;
		align-items: center;

	}
	.jifenshop{
		border-radius: 20upx;
		padding: 0 10upx;
		margin-left: auto;
		border:1px solid #000000;
	}
	.lianx{
		font-size:30upx;
		text-align: center;
	}
	.lianxTian{
		font-size:30upx;
		text-align:center;
		color:#2892ff;
	}
	.lianxTian text{
		font-size:70upx;
	}
	.LXtip{
		font-size: 26upx;
		color:#686767;
		margin-bottom:10px;
		text-align:center;
	}
	.daybox{
		display: flex;
		justify-content:space-around;
	}
	.daybox>view{
		width:77upx;
		position:relative;
		font-size:20upx;
	}
	.hasbg{
		background:url(../../static/qiandao/yiqian.png) no-repeat;
		background-size: 100% 100%;
		height:100upx;
		width:77upx;
		font-size:22upx;
		color:#FFFFFF;
		text-align:center;
	}
	.hasbg2{
		background:url(../../static/qiandao/unSignin.png) no-repeat;
		background-size: 100% 100%;
		height:100upx;
		width:77upx;
		font-size:22upx;
		color:#FFFFFF;
		text-align:center;
	}
	
	
	
	
	
	
	
	
	
	
	
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  background:#FFFFFF;
	}
	.title{
		height:98upx;
		text-align: center;
		font-size:36upx;
		line-height:98upx;
		color: #333333;
		position:relative;
		z-index:99;
		width:100%;
	}
	.top{width:100%;position:relative;height:510upx;}
	.title .left{position:absolute;left:20upx;top:15upx;}
	.title .left image{width:17upx;height:30upx;}
	.title .right{position:absolute;right:20upx;top:15upx;width:39upx;height:39upx;}
	.canvasbaer{
		width:100%;
		height:509upx;
	}
	.bgimg{
		width:100%;
		height:510upx;
		position:absolute;
		z-index:98;
	}
	.yulu{
		position:absolute;
		top: 120upx;
		left:60upx;
		color:#FFFFFF;
		z-index:100;
	}
	.yuluBig{
		font-size:40upx;
		font-weight:700;
	}
	.from{
		font-size:20upx;
		font-weight:300;
	}
	.dateTime{
		position: absolute;
		top: 160px;
		right: 25upx;
		color: #FFFFFF;
		text-align: right;
		z-index: 100;

	}
	.data{
		font-size:40upx;
	}
	.data text{
		font-size:60upx;
		line-height:1;
	}
	.dataym{
		font-size:40upx;
	}
</style>
